<template>
  <!-- 首页 -->
  <div class="main">
    <!-- 全局弹窗组件 -->
    <k-popup
      v-model="popShow"
      :popWidth="popWidth"
      :popHeight="popHeight"
      :popHiddenX="popHiddenX"
      :popHiddenY="popHiddenY"
      :popShowX="popShowX"
      :popShowY="popShowY"
      :rotate="rotate"
      :useScale="useScale"
      :useOpacity="useOpacity"
      :outside="outside"
    >
      <!-- 弹窗内容 -->
      <div class="popupStyle">
        <div class="top-box" @click="$router.push('/profile')">
          <div v-if="!$store.state.userInfo.nickname" class="login" @click.stop="$router.push('/login')">登录</div>
          <img v-if="$store.state.userInfo.nickname" class="avatar" :src="$store.state.userInfo.avatar" />
          <div v-if="$store.state.userInfo.nickname" class="userinfo">
            <div class="nickname">{{ $store.state.userInfo.nickname }}</div>
            <div class="userid">ID:{{ $store.state.userInfo.ID + 10000 }}</div>
          </div>
          <div v-if="$store.state.userInfo.nickname" class="exit" @click.stop="exitClick">注销</div>
        </div>
        <div class="item-box">
          <div class="item" @click="$router.push('/bookrack')">我的书架</div>
          <div class="line"></div>
          <div class="item" @click="$router.push('/invite')">邀请好友</div>
          <div class="line"></div>
          <div class="item" @click="$router.push('/customer')">联系客服</div>
        </div>
        <img class="close" src="@/assets/img/icons/white/close.svg" @click="popShow = false" />
        <img class="setting" src="@/assets/img/icons/white/setting.svg" @click="$router.push('/setting')" />
      </div>
    </k-popup>
    <!-- 首页内容 -->
    <k-scroll
      class="scroll"
      topColor="var(--main-background-color)"
      bottomColor="var(--main-background-color)"
      topType="stretch"
      bottomType="stretch"
    >
      <div class="home">
        <img class="more" src="@/assets/img/icons/black/more.svg" @click="popShow = !popShow" />
        <div class="title">小说搜索引擎</div>
        <div class="search-box" @click="$router.push('/Search')">
          <img class="search" src="@/assets/img/icons/search.svg" />
          <div class="input">搜索书名、作者</div>
        </div>
        <div class="hot-title">热搜榜</div>
        <div class="hot-scroll" @touchmove.stop>
          <div
            class="novel-item"
            :style="{ marginRight: index != hotNovel.length - 1 ? '4%' : '0%' }"
            v-for="(item, index) in hotNovel"
            :key="JSON.stringify(item)"
            @click="itemClick(item.noveltable)"
          >
            <img class="image" v-lazy="item.img" />
            <div class="novel-name">{{ item.name }}</div>
            <div class="novel-author">{{ item.author }}</div>
            <div class="sort">NO.{{ index + 1 }}</div>
          </div>
        </div>
      </div>
    </k-scroll>
  </div>
</template>

<script>
export default {
  name: 'Main',
  //组件挂载
  mounted() {
    //把缓存中的token放入store中
    if (localStorage.getItem('token')) {
      this.$store.commit('setToken', localStorage.getItem('token'))
    }
    this.$updateUserInfo() //更新用户信息
    this.getHotNovels()
  },
  data() {
    return {
      //对话框的宽度，单位相对于浏览器的百分比
      popWidth: 100,
      //对话框的高度，单位相对于浏览器的百分比
      popHeight: 33,
      //对话框隐藏时的X位置，单位相对于浏览器的百分比
      popHiddenX: 0,
      //对话框隐藏时的Y位置，单位相对于浏览器的百分比
      popHiddenY: 100,
      //对话框出现时的X位置，单位相对于浏览器的百分比
      popShowX: 0,
      //对话框出现时的Y位置，单位相对于浏览器的百分比
      popShowY: 67,
      //是否显示对话框
      popShow: false,
      //过渡旋转角度
      rotate: 0,
      //使用缩放过渡
      useScale: false,
      //使用透明度变化
      useOpacity: true,
      //开启外部点击关闭弹窗
      outside: true,

      //热搜榜的小说
      hotNovel: [],
    }
  },
  //方法
  methods: {
    //进入热搜榜小说
    itemClick(table) {
      //路由跳转
      this.$router.push({
        path: '/read',
        query: { table },
      })
    },
    //获取热门搜索小说
    getHotNovels() {
      this.$network
        .main('postNull', 'getHotNovels')
        .then((data) => {
          this.hotNovel = data
        })
        .catch((err) => {
          this.$dialog({
            message: err,
          })
        })
    },
    //退出被点击
    exitClick() {
      this.$dialog
        .confirm({
          message: '您确定要退出登录吗?',
        })
        .then((data) => {
          this.$store.commit('delToken') //清除token
          this.$store.commit('delUserInfo') //清除用户信息
        })
        .catch((err) => {})
    },
  },
}
</script>

<style scoped src="./index.css"></style>
